<template>
    <div>
      <vab-card shadow="always">
        <template #default>
          <div class="flex_sb">
            <div class="flex leve_title">
              信用档案-
              <span class="remark_text">详情</span>
            </div>
            <div class="flex_just_end">
              <el-button size="small" @click="handleClick('back')">
                返回
              </el-button>
            </div>
          </div>
        </template>
      </vab-card>
      <!-- 基础信息 -->
      <VabCard>
        <template #header>
          <span class="leve2_title">基础信息</span>
        </template>
        <template #default >
          <el-row :gutter="24" v-loading="loading">
            <el-col
              v-for="(item, i) in DetailBase"
              :key="i"
              :xs="24"
              :sm="12"
              :md="12"
              :lg="8"
              :xl="8"
            >
              <div class="detail-mode" v-if="baseData">
                <span class="label">{{ item.label }}</span>
                <span class="text height" :title="baseData[item.prop] || '--'">
                  {{ baseData[item.prop] || '--' }}
                </span>
              </div>
            </el-col>
            <el-col
              :xs="24"
              :sm="12"
              :md="12"
              :lg="16"
              :xl="16"
            >
              <div class="remark" v-if="baseData">
                <span class="label">备注</span>
                <span class="text height">
                  {{ baseData.note || '--' }}
                </span>
              </div>
            </el-col>
          </el-row>
        </template>
      </VabCard>
      <!-- 产品价格信息 -->
      <VabCard>
        <template #header>
          <div class="flex">
            <span class="leve2_title">信用对象明细</span>
            <div @click="handleShowPrice()">
              <vab-icon icon="eye-close-line" v-if="isClosePrice"/>
              <vab-icon icon="eye-line" v-else/>
            </div>
            
          </div>
          
        </template>
        <template #default>
          <el-table
            border
            height="320"
            style="width: 100%"
            :data="product"
            v-loading="loading"
          >
            <el-table-column label="序号" align="center" width="60">
              <template #default="scope">
                <span
                  class="ellipsis"
                  v-text="scope.$index + 1"
                ></span>
              </template>
            </el-table-column>
            <el-table-column
              v-for="(item, i) in _ProductDetail"
              :key="i"
              min-width="100"
              :width="item.width"
              :prop="item.prop"
              :label="item.label"
              :align="item.type == 'money' || item.type == 'number' ? 'right' : 'center'
                "
            >
              <template #header>
                <span class="text_center">{{ item.label }}</span>
              </template>
              <template #default="scope">
                <!-- 自定义 -->
                <div v-if="item.type == 'custom'">
                  <span v-if="item.prop == 'credit_status'">
                    {{ scope.row.credit_status == 1 ? '正常检查' : (scope.row.credit_status == 2 ? '信用冻结' : '信用免检') }}
                  </span>

                  <span v-if="item.prop == 'credit_amount'" class="text_right">
                    {{ item.disable ? '******' : _FieldFormat(scope.row[item.prop], 'money') }}
                  </span>

                </div>
                <!-- 正常 -->
                <div v-else class="ellipsis">
                  {{ _FieldFormat(scope.row[item.prop], item.type) }}
                </div>
              </template>
            </el-table-column>
          </el-table>
          <VabTotal :total="product.length"/>
        </template>
      </VabCard>
    </div>
  </template>
  
<script setup lang="ts">
defineOptions({
  name: 'CreditDetail',
})
import { crediInfo, crediSearch } from '~/src/api/dms/credit';
/**
 * @import
 */
import { DetailCloums, DetailBase, ReturnSelectOptions } from './component/tools'
import { FieldFormat } from '~/src/utils/utils'
import { organization_list } from '~/src/api/dms/organization';
import { options_list } from '~/src/api/dms/options';

/**
 * @var
 */
const router = useRouter()
const route = useRoute()
const { id } = route.query

const isClosePrice = ref(true)
let sreachObj = reactive<any>(null)

let baseData = reactive<any>(null)
let product = ref<any>([])
let loading = ref(false)

const _ProductDetail = ref<any>([...DetailCloums])

/**
 * @method
 */

// 字段级格式化
const _FieldFormat = (value: string, type = '') => {
  return FieldFormat(value, type, 2)
}

const handleClick = async (value: any) => {
  if (value == 'back') {
    router.go(-1)
    return
  }
}
// 是否显示价格
const handleShowPrice = async () => {
  isClosePrice.value = await !isClosePrice.value

  _ProductDetail.value.forEach((el: any) => {
    el.disable = isClosePrice.value
  });
}
// 筛选项
const _GetProductSearch = async () => {
  try {
    const res = await crediSearch()
    const orgRes = await organization_list({})
    const currencyRes = await options_list({ module: 'currency' })
    sreachObj = await res.data
    sreachObj.org_list = await orgRes.data
    sreachObj.currency = currencyRes.data
  } catch (error) { }
}
const _CrediCustomerInfo = async () => {
  loading.value = true
  try {

    await _GetProductSearch()

    const { ctrl_scope, object_type } = sreachObj

    const res = await crediInfo({ id })
    baseData = res.data


    const ctrl_scopeRow = ctrl_scope.filter((item: any) => { if (item.id == baseData.ctrl_scope) return item })
    const object_typeRow = object_type.filter((item: any) => { if (item.id == baseData.object_type) return item })

    baseData.ctrl_scope_name = ctrl_scopeRow[0].name
    baseData.object_type_name = object_typeRow[0].name

    product.value = res.data.customer_list
    loading.value = false
    _ProductDetail.value.forEach((el: any) => {
      el.disable = isClosePrice.value
    });
  } catch (error) { }
}

onMounted(() => {
  _CrediCustomerInfo()

})
</script>
  
<style scoped lang="scss">
.height {
  display: inline-block;
  max-height: 48px;
  overflow-y: auto;
}

.remark {
  display: flex;

  .label {
    display: inline-block;
    width: 122px;
    text-align: right;
    font-size: 14px;
    color: #606266;
    margin-right: 10px
  }

  .text {
    flex: 1;
    border: 1px solid #C0C0C0;
    color: #a9a9a9;
    border-radius: 4px;
    padding: 0px 10px;
    height: 40px;
    overflow-y: auto;
  }
}
</style>
  